This is a Jupyter Lab Extension for the Pedagogical Agent (PA), providing a user interface for a student to interact with the agent. This documentation is your comprehensive guide to understanding the components of this extension.
For development, refer to the Development section at the end of this README
Here are some of the key features of the PA Extension:
- Feature 1: Chat message input
- Feature 2: Drag and drop cells to query
- JupyterLab <
4.0
- NodeJS
Note: Only supports
JupyterLab < 4
due to compatability issues
jlpm
is JupyterLab's version of
yarn. Alternatively,
yarn
or npm
can be used interchangeably.
- In the main directory, run the following command
pip install -e .
- Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite
- Rebuild extension Typescript source after making changes
jlpm run build
Run the following 2 commands in different terminals
# Run the extension in one terminal
jlpm run watch
# Run JupyterLab in a separate terminal
jupyter lab
Changes to extension will be automatically saved. Refresh JupyterLab to apply changes.
Note: There will be 2 icons in the toolbar, the one on the left will be for development, where changes are automatically saved and updated through jlpm run watch
, while the icon on the right will not be updated, as it is built upon launching of the extension
.
├── docker # Docker file for extension (Not yet implemented - Work in Progress)
├── jupyterlab_stickyland # Extension files
├── src # Source code for interface components
└── agent.ts # Agent components (Chat messages, display inputs/responses)
└── button.ts # Button to open/close the chat window
└── content.ts # Displays the agent component
└── icons.ts # Different icons used for the extension
└── index.ts # Collates the different components and displays button on the toolbar
└── mainContainer.ts # Displays the Agent in the Window
└── svg.d.ts #
└── tab.ts # Container inside the mainContainer window
├── style # Styling CSS files for inteface components
├── build.sh # Docker build file (Not yet implemented - Work in Progress)
└── run.sh # Run script for docker file (Not yet implemented - Work in Progress)
This extension was developed with reference to StickyLand
@inproceedings{wangStickyLandBreakingLinear2022,
title = {{{StickyLand}}: {{Breaking}} the {{Linear Presentation}} of {{Computational Notebooks}}},
shorttitle = {{{StickyLand}}},
booktitle = {Extended {{Abstracts}} of the 2022 {{CHI Conference}} on {{Human Factors}} in {{Computing Systems}}},
author = {Wang, Zijie J. and Dai, Katie and Edwards, W. Keith},
year = {2022},
publisher = {{ACM}}
}
The software is available under the BSD-3-Clause License.
For development of the extension, the react components are inside src folder. Files are in TypeScript format and developed through DOM.
To be developed/improved:
- Currently the interface is simple, without design/formatting of the texts
- Markdown could be used to display instead of using TextArea element for the chat
- Currently there are a few layers of components and containers
Agent
<Content
<ContentTab
<mainContainer
- It could be cleaner to remove
ContentTab
to reduce the number of layers
- Undeveloped docker file
- Files:
./run.sh
,./docker/Dockerfile
- Files: